<template>
  <div class="project" v-loading="loading">
    <div class="year">
      <span>年份：</span>
      <div
        v-for="(item, index) in timeList"
        :key="index + 'time'"
      >
        <div
          class="year-item"
          :class="{
            active: currentYear === index
          }"
          @click="clickYear(index)"
        >
          <!-- disabled:
              isView && timeList[index].year > todayYear -->
          {{ item.year }}
        </div>
      </div>
    </div>

    <div class="month" v-if="timeList.length">
      <span>月份：</span>
      <div
        v-for="(item, index) in timeList[currentYear].month"
        :key="index + 'month'"
      >
        <div
          class="month-item"
          :class="{
            active: currentMonth === index
          }"
          @click="clickMonth(index)"
        >
          <!-- disabled:
              isView &&
              timeList[currentYear].year === todayYear &&
              timeList[currentYear].month[index] >
                todayMonth -->
          {{ item }}月
        </div>
      </div>
    </div>

    <div
      v-for="(item, index) in basicFormList"
      :key="index + 'form'"
    >
      <div
        v-for="(items, indexs) in item.month"
        :key="`${index}${indexs}`"
      >
        <el-form
          :model="items.ydwcqk"
          label-position="top"
          :rules="basicRules"
          :ref="`basicFormRef${index}${indexs}`"
          v-show="
            currentYear === index && currentMonth === indexs
          "
        >
          <!-- 当前进度情况 -->
          <div class="project-part">
            <div class="project-part-title">
              当前进度情况
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="当前完成投资"
                    prop="dqwctz"
                  >
                    <el-input
                      v-model="items.ydwcqk.dqwctz"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'dqwctz'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.dqwctz)
                      "
                    >
                      <template slot="append"
                        >万元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item label="完成形象进度">
                    <el-input
                      type="textarea"
                      v-model="items.ydwcqk.wcxxjd"
                      :rows="4"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'wcxxjd'
                        )
                      "
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 资金支付情况 -->
          <div class="project-part">
            <div class="project-part-title">
              资金支付情况
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="财政支付"
                    prop="czzf"
                  >
                    <el-input
                      v-model="items.ydwcqk.czzf"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'czzf'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.czzf)
                      "
                    >
                      <template slot="append"
                        >万元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="其他出资"
                    prop="qtcz"
                  >
                    <el-input
                      v-model="items.ydwcqk.qtcz"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'qtcz'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.qtcz)
                      "
                    >
                      <template slot="append"
                        >万元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 今年截至目前新增建成规模 -->
          <div class="project-part">
            <div class="project-part-title">
              今年截至目前新增建成规模
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item label="道路" prop="dl">
                    <el-input
                      v-model="items.ydwcqk.dl"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'dl'
                        )
                      "
                      @blur="inputToNumber(items.ydwcqk.dl)"
                    >
                      <template slot="append"
                        >万平方米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item label="景观" prop="jg">
                    <el-input
                      v-model="items.ydwcqk.jg"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'jg'
                        )
                      "
                      @blur="inputToNumber(items.ydwcqk.jg)"
                    >
                      <template slot="append"
                        >万平方米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item label="房建" prop="fj">
                    <el-input
                      v-model="items.ydwcqk.fj"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'fj'
                        )
                      "
                      @blur="inputToNumber(items.ydwcqk.fj)"
                    >
                      <template slot="append"
                        >万平方米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="综合管廊"
                    prop="zhgl"
                  >
                    <el-input
                      v-model="items.ydwcqk.zhgl"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'zhgl'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.zhgl)
                      "
                    >
                      <template slot="append"
                        >万平方米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 今年截至目前新增建成管线长度 -->
          <div class="project-part">
            <div class="project-part-title">
              今年截至目前新增建成管线长度
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="电力通道"
                    prop="dltd"
                  >
                    <el-input
                      v-model="items.ydwcqk.dltd"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'dltd'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.dltd)
                      "
                    >
                      <template slot="append"
                        >千米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="供水管网"
                    prop="gsgw"
                  >
                    <el-input
                      v-model="items.ydwcqk.gsgw"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'gsgw'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.gsgw)
                      "
                    >
                      <template slot="append"
                        >千米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="排水管网"
                    prop="psgw"
                  >
                    <el-input
                      v-model="items.ydwcqk.psgw"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'psgw'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.psgw)
                      "
                    >
                      <template slot="append"
                        >千米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="燃气管网"
                    prop="rqgw"
                  >
                    <el-input
                      v-model="items.ydwcqk.rqgw"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'rqgw'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.rqgw)
                      "
                    >
                      <template slot="append"
                        >千米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="通讯管网"
                    prop="txgw"
                  >
                    <el-input
                      v-model="items.ydwcqk.txgw"
                      :disabled="
                        getAdminDisabled(
                          index,
                          indexs,
                          'ydwcqk',
                          'txgw'
                        )
                      "
                      @blur="
                        inputToNumber(items.ydwcqk.txgw)
                      "
                    >
                      <template slot="append"
                        >千米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>

        <!-- 现场进度照片 -->
        <div
          class="project-part"
          v-show="
            currentYear === index && currentMonth === indexs
          "
        >
          <div class="project-part-title">
            现场进度照片
            <el-upload
              action="#"
              :show-file-list="false"
              :drag="false"
              :on-change="onImageListSelect"
              :auto-upload="false"
              :disabled="
                getAdminDisabled(
                  index,
                  indexs,
                  'ydwcqkPics'
                )
              "
              accept="image/png,image/jpg,image/jpeg"
              multiple
            >
              <span
                v-if="
                  !getAdminDisabled(
                    index,
                    indexs,
                    'ydwcqkPics'
                  )
                "
                class="upload"
              >
                <div class="upload-icon"></div>
                <div class="upload-text">上传照片</div>
              </span>
            </el-upload>
          </div>

          <div
            class="progress"
            v-if="
              currentYear === index &&
              currentMonth === indexs
            "
          >
            <div
              v-for="(i, indexss) in items.ydwcqkPics"
              :key="`${index}${indexs}${indexss}`"
            >
              <div class="progress-item">
                <el-image
                  :src="getImage(i.picture)"
                  :preview-src-list="
                    items.ydwcqkPics.map((item) =>
                      getImage(item.picture)
                    )
                  "
                />
                <i
                  class="el-icon-error"
                  @click="deletePhoto(indexss)"
                  v-if="
                    !getAdminDisabled(
                      index,
                      indexs,
                      'ydwcqkPics'
                    )
                  "
                ></i>
                <div class="progress-item-form">
                  <el-form
                    :ref="`basicFormRef${index}${indexs}${indexss}`"
                    :rules="basicRules"
                  >
                    <el-form-item
                      label="照片时间"
                      prop="zpsj"
                    >
                      <el-input
                        placeholder="例:2020-12-10"
                        v-model="i.picTime"
                        :disabled="
                          getAdminDisabled(
                            index,
                            indexs,
                            'ydwcqkPics'
                          )
                        "
                        @blur="inputToDate(i.picTime)"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="照片说明">
                      <el-input
                        type="textarea"
                        v-model="i.picExplain"
                        :disabled="
                          getAdminDisabled(
                            index,
                            indexs,
                            'ydwcqkPics'
                          )
                        "
                        :rows="3"
                      >
                      </el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="progress-photo"></div>

        <!-- 效果图每月进度图 -->
        <div
          class="project-part"
          v-show="
            currentYear === index && currentMonth === indexs
          "
        >
          <div class="project-part-title">
            效果图每月进度图
          </div>
          <div
            class="schedule"
            v-if="
              currentYear === index &&
              currentMonth === indexs
            "
          >
            <div
              v-for="(i, picIndex) in items.effectPicList"
              :key="`${index}${indexs}${picIndex}`"
              class="schedule-item"
            >
              <div class="schedule-item-left">
                <el-image
                  :src="getImage(i.pictureId)"
                  :preview-src-list="
                    items.effectPicList.map((item) =>
                      getImage(item.pictureId)
                    )
                  "
                />
                <div class="schedule-item-left-name">
                  {{ i.pictureIntroduce }}
                </div>
                <el-upload
                  action="#"
                  :show-file-list="false"
                  :drag="false"
                  :on-change="
                    (file) =>
                      uploadScheduleImg(
                        file,
                        picIndex,
                        i.pkid
                      )
                  "
                  :auto-upload="false"
                  :disabled="
                    getAdminDisabled(
                      index,
                      indexs,
                      'effectPicList'
                    )
                  "
                  accept="image/png,image/jpg,image/jpeg"
                  multiple
                >
                  <span
                    v-if="
                      !getAdminDisabled(
                        index,
                        indexs,
                        'effectPicList'
                      )
                    "
                    class="upload"
                  >
                    <div class="upload-text">
                      上传进度图
                    </div>
                  </span>
                </el-upload>
              </div>
              <div class="schedule-item-right">
                <div
                  class="schedule-item-right-img"
                  v-for="(
                    scheduleImg, sIndex
                  ) of i.planPictureRelList"
                  :key="`${index}${indexs}${picIndex}${sIndex}`"
                >
                  <el-image
                    :src="
                      getImage(scheduleImg.planPictureId)
                    "
                    :preview-src-list="
                      i.planPictureRelList.map((item) =>
                        getImage(scheduleImg.planPictureId)
                      )
                    "
                  />
                  <i
                    class="el-icon-error"
                    @click="
                      deleteSchedulePhoto(picIndex, sIndex)
                    "
                    v-if="
                      !getAdminDisabled(
                        index,
                        indexs,
                        'effectPicList'
                      )
                    "
                  ></i>
                  <el-form
                    :ref="`basicFormRef${index}${indexs}${picIndex}${sIndex}`"
                    :rules="basicRules"
                  >
                    <el-form-item label="照片时间">
                      <el-date-picker
                        v-model="scheduleImg.pictureTime"
                        type="date"
                        placeholder="照片时间"
                        value-format="yyyy-MM-dd"
                        :disabled="
                          getAdminDisabled(
                            index,
                            indexs,
                            'effectPicList'
                          )
                        "
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isAdmin, isEnterprise } from '@/utils/permission'
import {
  noticeFileDownload,
  securityFileUrl,
  noticeFileUpload
} from '@/api/wisdomBuild'
import { float, date } from '@/utils/formrule'

export default {
  props: {
    timeList: Array,
    isSaveClick: Boolean,
    detailInfo: Array,
    projectStatus: String,
    isView: Boolean,
    bpmStatus: String
  },
  data() {
    return {
      currentYear: 0,
      currentMonth: 0,
      basicFormList: [
        {
          month: []
        }
      ],
      basicForm: '',
      typeOptions: [],
      progressPhotoList: [],
      checkStatus: '0',
      isRresh: 0,
      basicRules: {
        dqwctz: [float],
        czzf: [float],
        qtcz: [float],
        dl: [float],
        jg: [float],
        fj: [float],
        zhgl: [float],
        dltd: [float],
        gsgw: [float],
        psgw: [float],
        rqgw: [float],
        txgw: [float],
        zpsj: [date]
      },
      loading: false,
      dateResult: true,
      hasValuePageIndex: [],
      lastedYearIndex: -1,
      lastedMonthIndex: -1
    }
  },
  watch: {
    timeList(val) {
      if (val.length) {
        const oldInfo = JSON.parse(
          JSON.stringify(this.basicFormList)
        )
        let oldInfoArr = []
        oldInfo.forEach((item) => {
          oldInfoArr = oldInfoArr.concat(item.month)
        })
        if (oldInfoArr.length === 0) {
          this.basicFormList = val.map((item) => {
            return {
              month: item.month.map((i) => {
                return {
                  ydwcqk: {
                    projectId: '',
                    dqwctz: '',
                    wcxxjd: '',
                    czcz: '',
                    qtcz: '',
                    dl: '',
                    jg: '',
                    fj: '',
                    zhgl: '',
                    dltd: '',
                    gsgw: '',
                    psgw: '',
                    rqgw: '',
                    txgw: '',
                    year: item.year,
                    month: i
                  },
                  ydwcqkPics: [],
                  effectPicList: []
                }
              })
            }
          })
        } else {
          this.basicFormList = []
          this.basicFormList = val.map((item) => {
            return {
              month: item.month.map((i) => {
                const oldVal = oldInfoArr.find(
                  (info) =>
                    info.ydwcqk.year === item.year &&
                    info.ydwcqk.month === i
                )
                if (oldVal === undefined) {
                  return {
                    ydwcqk: {
                      projectId: '',
                      dqwctz: '',
                      wcxxjd: '',
                      czcz: '',
                      qtcz: '',
                      dl: '',
                      jg: '',
                      fj: '',
                      zhgl: '',
                      dltd: '',
                      gsgw: '',
                      psgw: '',
                      rqgw: '',
                      txgw: '',
                      year: item.year,
                      month: i
                    },
                    ydwcqkPics: [],
                    effectPicList: []
                  }
                } else {
                  return oldVal
                }
              })
            }
          })
        }
      }
    },
    isSaveClick() {
      let result = true
      this.basicFormList.map((item, index) => {
        item.month.map((items, indexs) => {
          if (
            this.$refs[`basicFormRef${index}${indexs}`] &&
            this.$refs[`basicFormRef${index}${indexs}`][0]
          ) {
            this.$refs[
              `basicFormRef${index}${indexs}`
            ][0].validate((valid) => {
              if (valid) {
              } else {
                result = false
                return false
              }
            })

            items.ydwcqkPics.map((i, indexss) => {
              if (
                this.$refs[
                  `basicFormRef${index}${indexs}${indexss}`
                ] &&
                this.$refs[
                  `basicFormRef${index}${indexs}${indexss}`
                ][0]
              ) {
                this.$refs[
                  `basicFormRef${index}${indexs}${indexss}`
                ][0].validate((valid) => {
                  if (valid) {
                  } else {
                    result = false
                    return false
                  }
                })
              }
            })
          }
        })
      })

      // if (!this.dateResult) {
      //   this.$message.warning('请填写正确的照片时间格式')
      // }

      result
        ? this.$emit(
            'setYdwcqkVoList',
            this.basicFormList,
            true
          )
        : this.$emit(
            'setYdwcqkVoList',
            this.basicFormList,
            false
          )
      // this.$emit(
      //   'setYdwcqkVoList',
      //   this.basicFormList,
      //   true
      // )
    },
    detailInfo(val, oldVal) {
      if (val.length) {
        this.basicFormList = JSON.parse(
          JSON.stringify(this.detailInfo)
        )

        const keyList = [
          'czzf',
          'dl',
          'dltd',
          'dqwctz',
          'fj',
          'gsgw',
          'jg',
          'psgw',
          'qtcz',
          'rqgw',
          'txgw',
          'wcxxjd',
          'zhgl'
        ]
        for (
          let year = 0;
          year < this.detailInfo.length;
          ++year
        ) {
          let item = this.detailInfo[year].month
          for (
            let month = 0;
            month < item.length;
            ++month
          ) {
            const ydwcqk = item[month].ydwcqk
            const effectPicList = item[month].effectPicList
            const ydwcqkPics = item[month].ydwcqkPics
            for (let key of keyList) {
              if (ydwcqk[key]) {
                this.lastedYearIndex = year
                this.lastedMonthIndex = month
                this.hasValuePageIndex.push(
                  year + '-' + month
                )
                break
              }
            }
            if (ydwcqkPics.length > 0) {
              this.lastedYearIndex = year
              this.lastedMonthIndex = month
              if (
                this.hasValuePageIndex.indexOf(
                  year + '-' + month
                ) === -1
              ) {
                this.hasValuePageIndex.push(
                  year + '-' + month
                )
              }
            }
            for (let list of effectPicList) {
              if (list.planPictureRelList.length > 0) {
                this.lastedYearIndex = year
                this.lastedMonthIndex = month
                if (
                  this.hasValuePageIndex.indexOf(
                    year + '-' + month
                  ) === -1
                ) {
                  this.hasValuePageIndex.push(
                    year + '-' + month
                  )
                }
                break
              }
            }
          }
        }
      }
    },
    projectStatus(val) {
      this.checkStatus = val
    }
  },
  computed: {
    todayYear() {
      return new Date().getFullYear()
    },
    todayMonth() {
      return new Date().getMonth() + 1
    }
  },
  mounted() {},
  methods: {
    // 管理员禁用情况：
    // 1.详情
    // 2.管理员账号 && 新增
    // 3.审核完成状态 && 企业账号 && 数据不为空
    getAdminDisabled(index, indexs, projectKey, key) {
      if (
        this.isView ||
        (isAdmin() && this.checkStatus === '0')
        //  ||
        // (isEnterprise() &&
        //   this.bpmStatus === '3' &&
        //   this.hasValuePageIndex.indexOf(
        //     index + '-' + indexs
        //   ) !== -1)
        //   ||
        // (isEnterprise() &&
        //   this.bpmStatus === '4' &&
        //   index + '-' + indexs !==
        //     this.lastedYearIndex +
        //       '-' +
        //       this.lastedMonthIndex)
        // this.detailInfo[index].month[indexs][projectKey][
        //   key
        // ] !== '' &&
        // this.detailInfo[index].month[indexs][projectKey][
        //   key
        // ] !== null &&
        // this.detailInfo[index].month[indexs][projectKey][
        //   key
        // ] !== undefined)
      ) {
        return true
      } else {
        return false
      }
    },
    // 禁用现场进度照片
    // 1.详情
    // 2.管理员账号 && 新增
    // 3.审核完成状态 && 企业账号 && 数据不为空
    getAdminDiasbledForPic1(index, indexs, key) {
      if (
        this.isView ||
        (isAdmin() && this.checkStatus === '0')
        //  ||
        // (isEnterprise() &&
        //   this.bpmStatus === '3' &&
        //   this.detailInfo[index].month[indexs][key]
        //     .length !== 0)
      ) {
        return true
      } else {
        return false
      }
    },
    // 禁用效果图每月进度图
    // 1.详情
    // 2.管理员账号 && 新增
    // 3.审核完成状态 && 企业账号 && 数据不为空
    getAdminDiasbledForPic2(index, indexs, key) {
      let status = false

      if (
        this.isView ||
        (isAdmin() && this.checkStatus === '0')
      ) {
        status = true
      } else if (isEnterprise() && this.bpmStatus === '3') {
        this.detailInfo[index].month[indexs][key].forEach(
          (element) => {
            if (element.planPictureRelList.length > 0) {
              status = true
            }
          }
        )
      } else {
        status = false
      }

      return status
    },
    clickYear(index) {
      // if (
      //   this.isView &&
      //   this.timeList[index].year > this.todayYear
      // ) {
      //   this.$message.warning('不可查看未到年份')
      //   return
      // }
      this.currentYear = index
      this.currentMonth = 0
      // const picArr =
      //   this.basicFormList[this.currentYear].month[0]
      //     .ydwcqkPics
      // this.getImageList(picArr, this.currentYear, 0)
    },
    clickMonth(index) {
      // if (
      //   this.isView &&
      //   this.timeList[this.currentYear].year ===
      //     this.todayYear &&
      //   this.timeList[this.currentYear].month[index] >
      //     this.todayMonth
      // ) {
      //   this.$message.warning('不可查看未到月份')
      //   return
      // }
      this.currentMonth = index
      // const picArr =
      //   this.basicFormList[this.currentYear].month[
      //     this.currentMonth
      //   ].ydwcqkPics
      // this.getImageList(
      //   picArr,
      //   this.currentYear,
      //   this.currentMonth
      // )
    },

    // 点击选择照片
    async onImageListSelect(file) {
      this.loading = true
      if (
        file.raw.type === 'image/png' ||
        file.raw.type === 'image/jpeg' ||
        file.raw.type === 'image/jpg'
      ) {
        const { success, id } = await this.getImageId(
          file.raw
        )
        if (success) {
          const reader = new FileReader()
          reader.onloadend = () => {
            this.basicFormList[this.currentYear].month[
              this.currentMonth
            ].ydwcqkPics.push({
              src: reader.result,
              ydwcId: '',
              picTime: '',
              picExplain: '',
              picture: id,
              file: file.raw
            })
          }
          reader.readAsDataURL(file.raw)

          // 上传照片跳转到底部
          // window.location.hash = "#progress-photo"
          setTimeout(() => {
            document
              .getElementById('progress-photo')
              .scrollIntoView()
          }, 100)
        }
      } else {
        ElMessage.warning('请上传png、jpg图片')
      }
    },

    // 上传图片获取Id
    async getImageId(file) {
      // debugger
      const result = {
        success: false,
        id: ''
      }
      const params = new FormData()
      params.append('file', file)
      await noticeFileUpload(params)
        .then((res) => {
          if (res.success) {
            result.success = true
            result.id = res.data
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
      return result
    },

    // 删除图片
    deletePhoto(index) {
      this.basicFormList[this.currentYear].month[
        this.currentMonth
      ].ydwcqkPics.splice(index, 1)
    },

    // 获取当前展示图片列表
    getImageList(picArr, ndIndex, ydIndex) {
      const promiseList = []
      picArr.map((item, index) => {
        promiseList.push(
          this.getImage(
            item.picture,
            ndIndex,
            ydIndex,
            index
          )
        )
      })
      if (promiseList.length) {
        Promise.all(promiseList)
      }
    },

    // 展示图片
    getImage(pkid) {
      return securityFileUrl(pkid)
    },

    // 输入内容转化为数字
    inputToNumber(value) {
      value = Number(value) ? Number(value) : ''
      return value
    },

    inputToDate(date) {
      const reg = /^(\d{1,4})(-)(\d{1,2})\2(\d{1,2})$/
      if (date && date.match(reg) === null) {
        this.$message.warning('请填写正确的照片时间格式')
      }
    },

    // 点击上传进度图
    async uploadScheduleImg(file, picIndex, effectId) {
      this.loading = true
      if (
        file.raw.type === 'image/png' ||
        file.raw.type === 'image/jpeg' ||
        file.raw.type === 'image/jpg'
      ) {
        const { success, id } = await this.getImageId(
          file.raw
        )
        if (success) {
          const reader = new FileReader()
          reader.onloadend = () => {
            this.basicFormList[this.currentYear].month[
              this.currentMonth
            ].effectPicList[
              picIndex
            ].planPictureRelList.push({
              src: reader.result,
              effectId: effectId,
              year: this.basicFormList[this.currentYear]
                .month[this.currentMonth].ydwcqk.year,
              month:
                this.basicFormList[this.currentYear].month[
                  this.currentMonth
                ].ydwcqk.month,
              planPictureId: id,
              file: file.raw,
              pictureTime: ''
            })
          }
          reader.readAsDataURL(file.raw)
        }
      } else {
        ElMessage.warning('请上传png、jpg图片')
      }
    },
    // 删除进度图
    deleteSchedulePhoto(picIndex, index) {
      this.basicFormList[this.currentYear].month[
        this.currentMonth
      ].effectPicList[picIndex].planPictureRelList.splice(
        index,
        1
      )
    }
  }
}
</script>

<style scoped lang="scss">
.project {
  &-part {
    margin-top: 20px;

    &-title {
      margin: 10px 0 30px 15px;
      line-height: 18px;
      display: flex;
      font-size: 16px;

      &::before {
        content: '';
        width: 6px;
        height: 18px;
        background: url('~@/assets/images/wisdom-construction/title-pre.png');
        position: absolute;
        left: 0;
        top: 10;
      }

      .el-button {
        margin: -5px 0 0 20px;
      }
    }

    &-content {
      padding-left: 10px;
    }
  }

  .progress {
    padding: 0 10px 0 10px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    flex-flow: row wrap;

    &-item {
      display: flex;
      flex: 0 0 33.33%;
      margin: 20px 15px 0px 0px;
      position: relative;

      .el-image {
        width: 150px;
        height: 150px;
        margin-right: 20px;
      }

      &-form {
        // margin-top: 10px;
      }

      i {
        color: red;
        font-size: 24px;
        position: absolute;
        left: 125px;
        // top: -10px;
        cursor: pointer;
      }
    }
  }
}

.year,
.month {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
  line-height: 28px;

  &-item {
    width: 66px;
    height: 28px;
    background: #f6f9fc;
    border: 1px solid #ebf1f8;
    margin-right: 15px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 28px;

    &.active {
      color: #00baff;
      border: 1px solid #00baff;
    }
    &.disabled {
      background: #e8eff7;
      color: #000000ba;
    }
  }
}

.suffix {
  position: absolute;
  left: -120px;
  width: 100px;
  text-align: center;
}

::v-deep {
  .el-form-item__label {
    height: 30px;
    // margin-left: 15px;
    margin-top: -20px;
  }

  .el-select {
    width: 100%;
  }

  .el-input__inner {
    width: 320px !important;
  }
  .el-textarea__inner {
    width: 320px !important;
  }
}

.upload {
  cursor: pointer;
  display: flex;
  margin-left: 20px;

  &-text {
    color: #00baff;
  }

  &-icon {
    width: 16px;
    height: 16px;
    background: url('~@/assets/images/wisdom-construction/upload-image.png');
    background-size: 100% 100%;
    margin-top: 2px;
  }
}

.schedule {
  &-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 20px;
    &-left {
      width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      position: relative;
      .el-image {
        width: 200px;
        height: 150px;
        margin-bottom: 10px;
      }
      &-name {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 130px;
        left: 0;
        background-color: #0000005e;
        font-size: 14px;
        color: #fff;
      }
      .upload {
        margin-left: 0;
        // border: 1px solid #10beff;
        border-radius: 2px;
        padding: 9px 17px;
        background-color: #10beff;
        &-text {
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          line-height: 14px;
        }
      }
    }
    &-right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      &-img {
        width: 200px;
        margin-bottom: 10px;
        margin-right: 10px;
        position: relative;
        .el-image {
          width: 200px;
          height: 120px;
          margin-bottom: 20px;
        }
        .el-icon-error {
          color: red;
          font-size: 24px;
          position: absolute;
          top: 0px;
          right: 0px;
          cursor: pointer;
        }
        ::v-deep .el-input__inner {
          width: 200px !important;
        }
      }
    }
  }
}
</style>
